<template>
  <div class="box">
    <tohome></tohome>
    <h1>短信快捷登录</h1>
    <p>未注册手机号验证后自动创建点点约玩账户</p>

    <ul>
      <li>
        <input type="text" placeholder="请输入手机号" v-model="userTels" />
      </li>
      <li>
        <input
          type="text"
          placeholder="请输入动态密码"
          class="spe"
          v-model="userPsw"
        /><button @click="handleSend" :disabled="Boolean(btn)">
          {{ text }}
        </button>
      </li>
    </ul>
    <div>
      <button class="login" @click="hanldeClick">登录</button>
    </div>
    <div><button class="has" @click="handleHas">已有账户登录</button></div>
  </div>
  <!-- {{ arr }} -->
</template>
<script>
import tohome from '../components/headers/clickHome.vue'
export default {
  components: {
    tohome
  },
  data () {
    return {
      userTels: '',
      userPsw: '',
      arr: [],
      id: 0,
      text: '发送动态密码',
      btn: false
    }
  },
  mounted () {
    for (let i = 0; i < 1000; i++) {
      if (localStorage.getItem(`username${i}`) !== null) {
        this.arr.push(localStorage.getItem(`username${i}`))
      }
    }
    this.arr = [...new Set(this.arr)]
  },
  methods: {
    hanldeClick () {
      if (/^1[3456789]\d{9}$/.test(Number(this.userTels))) {
        // this.id = Math.floor(Math.random() * 1000)
        if (this.arr.includes(this.userTels)) {
          alert('此号码已经被注册,请点击已有账户登录')
        } else {
          alert('请点击发送验证密码进行注册')
          this.id = Math.floor(Math.random() * 1000)
          localStorage.setItem('username', this.userTels)
          // 存入账号
        }
      } else {
        alert('请输入正确的手机号码')
        this.userTels = ''
      }
    },

    handleSend () {
      if (/^1[3456789]\d{9}$/.test(Number(this.userTels))) {
        if (this.arr.includes(this.userTels)) {
          alert('此号码已经被注册,请点击已有账户登录')
          this.btn = true // 注册过,无法点击
        } else {
          var num = 5
          var timer = setInterval(() => {
            num--
            this.btn = true
            if (num === 0) {
              this.btn = false
              this.arr.push(this.userTels)
              clearInterval(timer)
              this.$router.push('/mycenter')
            } else if (num === 2) {
              this.text = '发送动态密码'
              this.userPsw = '注册成功'
              localStorage.setItem('username', this.userTels)
            } else {
              this.text = num + 's后再次发送'
            }
          }, 1000)
        }
      } else {
        alert('请先输入正确的手机号码')
        this.userTels = ''
      }
      /* setInterval(() => {
        if (this.num > 1) {
          this.text = '发送动态密码'
          this.btn = true
        } else {
          this.num--
          this.text = '大招还剩' + this.num + '秒'
          this.btn = false
        }
      }, 1000) */
    },
    handleHas () {
      if (/^1[3456789]\d{9}$/.test(Number(this.userTels))) {
        if (this.arr.includes(this.userTels)) {
          this.$router.push('/mycenter')
        } else {
          alert('该号码未注册,请先点击发送动态密码注册')
        }
      } else {
        alert('请输入已经注册过的手机号码')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  height: 100%;
}
.box {
  width: 100%;
  height: 100%;
  background: #eee;
  padding: 50px 20px;
  h1 {
    height: 40px;
    line-height: 40px;
    font-weight: normal;
    color: #444;
    font-size: 32px;
    margin-bottom: 10px;
  }
  p {
    color: #999;
    font-size: 14px;
  }
  ul {
    margin-top: 30px;

    li {
      height: 40px;
      border-bottom: 1px solid #ccc;
      margin-top: 30px;
      input {
        height: 35px;
        border: 0;
        outline: 0;
        float: left;
        font-size: 20px;
        width: 100%;
        line-height: 25px;
        background: #eee;
        text-indent: 10px;
      }
      .spe {
        width: 60%;
      }
      button {
        float: right;
        width: 35%;
        border: 0;
        outline: 0;
        color: #fff;
        background: #4f94f7;
        border-radius: 17px;
        height: 35px;
        line-height: 35px;
        text-align: center;
      }
    }
  }
  div {
    margin-top: 30px;
    button {
      border: 0;
      outline: 0;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 20px;
    }
    .login {
      background: #ff626b;
      color: #fff;
    }
    .has {
      background: #ddd;
      color: #888;
    }
  }
}
</style>
